<template>
    <el-card shadow="never" class="table-wrapper">
        <el-table
            ref="queryFormRef"
            :data="appTableData"
            v-loading="loading"
            row-key="id"
            highlight-current-row
        >
            <template v-for="item in appTableHead">
                <el-table-column
                    :prop="item.prop"
                    :label="item.label"
                    :show-overflow-tooltip="true"
                    align="left"
                >
                    <template v-if="item.label === '状态'" #default="scope">
                        <el-switch
                            v-model="scope.row.status"
                            @change="statusSwitchBtnClick(scope.row)"
                            class="ml-2"
                            width="60"
                            inline-prompt
                            :active-value="1"
                            :inactive-value="0"
                            active-text="显示"
                            inactive-text="禁用"
                        />
                    </template>
                </el-table-column>
            </template>
        </el-table>
    </el-card>
    <dialogddAppPermission
        v-model="dialogAddAppVisible"
        @handleQuery="handleQuery"
    ></dialogddAppPermission>
</template>

<script setup lang="ts">
import { appTableHead } from "../index";
import MenuAPI from "@/api/system/menu";

const dialogAddAppVisible = ref(false);

const emit = defineEmits(["handleQuery"]);

const props = defineProps({
    loading: {
        required: true,
        default: () => false,
    },
    appTableData: {
        required: true,
        default: () => [] as any,
    },
});

const switchLoading = ref(false);

/**
 * 状态switch按钮
 */
const statusSwitchBtnClick = (scoped: any) => {
    switchLoading.value = true;
    const params = {
        id: scoped.id,
        status: scoped.status,
    };

    MenuAPI.appUpdataStatus(params)
        .then(() => {
            ElMessage.success("修改成功");
        })
        .catch(() => {
            ElMessage.success("修改失败");
        })
        .finally(() => {
            switchLoading.value = false;
            handleQuery();
        });
};

// 打开弹窗
const handleOpenDialog = () => {
    dialogAddAppVisible.value = true;
};
//
const handleQuery = () => {
    emit("handleQuery");
};

defineExpose({
    handleOpenDialog,
});
</script>

<style lang="scss" scoped></style>
